<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" tag="a" href="/home" />
      <router-link to="/kind" class="te">菜单分类</router-link>
      <router-link to="/delicious" class="te">美食养生</router-link>
    </div>
    <input type="text" placeholder="搜索:好吃的"/>
    <div class="gang"></div>
    <ul>
      <li>
        <a href="" class="hot">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
      <li>
        <a href="">热门</a>
        <span>好吃的</span>
        <span>好玩的</span>
        <span>好喝的</span>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
  @import "@/lib/reset";
  .container {
    .header {
      @include rect(100%,.42rem);
      font:.14rem/.42rem "";
      .te{
        margin-left:.8rem;
      }
    }
    input {
      border-radius: .5rem;
      @include rect(98%,.3rem);
      text-indent: .05rem;
      text-align:center;
      border: .01rem solid #ccc;
      margin-bottom: .1rem
    }
    .gang {
      @include rect(100%,.005rem);
      background:#cacaca;
      margin-bottom: .1rem
    }
    ul {
      li {
        @include flexbox();
        @include justify-content(space-around);
        margin-bottom: .2rem;
        a {
          &.hot {
            color: red
          }
        }
      }
    }

  } 

</style>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
export default {
  
}
</script>